<template>
	<view>
		<wrapBgImgVue
			bgImg="goods/goods_top.png"
		/>
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="超级VIP"
			@onTotalHeight="onTotalHeight"
		/>
		
		<view class="wrap"
			:style="'padding-top: calc(' + (topHeight) + 'px) !important;'"
		>
			<view class="head">
				<image src="https://pic1.imgdb.cn/item/6780a9e9d0e0a243d4f2ef8b.png" mode="widthFix" class="bgimg" />
				<view class="con">
					<image :src="$wanlshop.oss(user.avatar, 35, 35, 2, 'avatar')" mode="aspectFill" class="userImg" />
					<view class="userCon">
						<view class="userName">{{user.nickname}}</view>
						<view class="texts">开通会员享受会员权益</view>
					</view>
				</view>
				<image v-if="user.member == 1 && isMemberExpired" :src="$wanlshop.oss(common.imgList.yiguoqi,145,145)"
					mode="widthFix" class="yiguoqi"></image>
			</view>
			
			<view class="content">
				<view class="titles">
					<view class="line"></view>
					<view class="tname">尊享超级VIP专属特权</view>
				</view>
				<view class="member-box">
					<view v-for="(item,index) in vipList" :key="index"
						:class="number == item.vip_id?'selectbox member-con':'member-con'" @click="memberTab(item)">
						<view :class="number == item.vip_id?'member-title selectcolor':'member-title'">{{item.name}}</view>
						<view class="member-money"><text>￥</text>{{item.pirce}}</view>
						<view :class="number == item.vip_id?'member-price line-con selectcolorop':'member-price line-con'">
							{{item.line_price}}
						</view>
					</view>
				</view>
				<view class="words">注意会员开通时间，到期失效</view>
				<!-- <view class="words">同一个ID仅可享受一次优惠，轻易实际支付价格为准</view> -->
				<view class="titles">
					<view class="line"></view>
					<view class="tname">超级VIP专属权限</view>
				</view>
				<view class="box">
					<block v-for="(item, index) in vipExplain" :key="index">
						<view class="boxmove">
							<image
								class="box-img"
								:src="$wanlshop.oss(item.image)"
							/>
							
							<view class="bname">
								{{ item.title }}
							</view>
						</view>
					</block>
				</view>
				
				<view class="agreement">
					开通前请阅读
					<text class="red" @tap="onDetails($store.state.common.appConfig.user_vip, '会员服务协议')">
						《会员服务协议》
					</text>
				</view>
			</view>
		</view>
		
		<view class="null"></view>
		
		<view class="bottom">
			<view class="moneybox">
				<view class="price"><text class="y">￥</text>{{vip.pirce}}</view>
			</view>
			<view class="go" @tap="pay()">确认协议并支付</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import { getVipExplain } from "@/utils/API.js";
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapBgImgVue from "../components/navigationBar/bgImg.vue";
	
	export default {
		components: {
			wrapBgImgVue,
			navigationBarVue
		},
		data() {
			return {
				topHeight: 0, //顶部高度
				
				number: 0,
				vipList: [],
				vip: {
					pirce: 0
				},
				
				vipExplain: [], //会员权益
			}
		},
		onLoad() {
			this.onGetExplain();
			this.loadData()
		},
		computed: {
			...mapState(['user', 'statistics', 'common']),
			isMemberExpired() {
				// 确保 member_time 存在且为有效字符串
				if (!this.user.member_time) {
					console.log('member_time is undefined or empty');
					return false; // 或者根据需求返回其他值
				}
				// 将 '2025-01-13 00:00:00' 转换为 '2025-01-13T00:00:00Z'
				const formattedMemberTime = this.user.member_time.replace(' ', 'T') + 'Z';
				const currentTime = Date.now(); // 当前时间戳
				const memberTime = new Date(formattedMemberTime).getTime(); // 将 member_time 转换为时间戳
				return currentTime > memberTime; // 比较当前时间和会员时间
			}
		},
		methods: {
			/**
			 * 顶部高度
			 */
			onTotalHeight(height) {
				this.topHeight = height;
			},
			
			pay() {
				if (this.vip.pirce == 0) {
					this.$wanlshop.msg(`请先选择要购买的会员`);
					return;
				}
				uni.login({
					success: (e) => {
						console.log(e.code);
						this.wanlPay(e.code);
					},
					fail: (e) => {
						uni.showModal({
							content: "无法获取微信code,原因为: " + e.errMsg,
							showCancel: false
						})
					}
				})

			},
			async wanlPay(code = null) {
				await uni.request({
					url: '/wanlshop/pay/payMember',
					method: 'POST',
					data: {
						code: code,
						price: this.vip.pirce,
						vip_id: this.vip.vip_id
					},
					success: res => {

						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: (e) => {
								this.$st.success("支付成功", () => {
									uni.navigateBack();
								})
								// console.log(e, '支付成功');
								// uni.request({
								// 	url: '/wanlshop/user/joinVip',
								// 	method: 'POST',
								// 	data: {
								// 		vip_id: this.vip.vip_id,
								// 		vip_user_id: res.data.vip_user.vip_user_id
								// 	},
								// 	success: (e) => {
								// 		uni.showToast({
								// 			'complete': 1500,
								// 			'title': '开通成功',
								// 			'icon': 'success'
								// 		})
								// 		setTimeout(() => {
								// 			uni.navigateBack(); // 返回上一页
								// 		}, 1500);
								// 	},
								// });
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false
								})
							}
						})
					}
				});

			},
			memberTab(vip) {
				console.log(vip);
				this.number = vip.vip_id
				console.log(this.number);
				this.vip = vip
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/getVipList',
					method: 'GET',
					success: res => {
						this.vipList = res.data
					}
				});
			},
			/**
			 * 获取权益
			 */
			onGetExplain() {
				getVipExplain().then(res => {
					this.vipExplain = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 686rpx;
		margin-left: 32rpx;
		position: relative;
	}

	.bgimg {
		width: 100%;
		height: 246rpx;
	}

	.con {
		position: absolute;
		width: 100%;
		bottom: 70rpx;
		display: flex;
		align-items: center;
	}

	.userImg {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		border: 2px solid #84BD00;
		margin-left: 30rpx;
	}

	.userCon {
		margin-left: 20rpx;
	}

	.userName {
		font-size: 36rpx;
		color: #84BD00;
		font-weight: 700;
	}

	.texts {
		font-size: 26rpx;
		color: #84BD00;
		margin-top: 10rpx;
	}

	.content {
		width: 750rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding-bottom: 40rpx;
		margin-top: -30rpx;
		position: relative;
	}

	.member {
		width: 686rpx;
		margin-left: 32rpx;
		height: 190rpx;
		background-image: linear-gradient(to right, #E7DE94, #F7E893, #FEEE97);
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 3px solid #E4C664;
		box-sizing: border-box;
	}

	.open {
		width: 138rpx;
		height: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(to right, #FEA40D, #F48762);
		font-size: 26rpx;
		color: #fff;
		border-radius: 50rpx;
		margin-right: 32rpx;
	}

	.detail {
		margin-left: 32rpx;
		/* display: flex;
  align-items: center; */
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.big {
		font-size: 26rpx;
	}

	.newMony {
		font-size: 46rpx;
		font-weight: 700;
		color: #CA281C;
		width: 80rpx;
		margin-right: 30rpx;
		text-align: center;
	}

	.describe {
		font-size: 26rpx;
		color: #BFB261;
	}

	.original {
		width: 80rpx;
		height: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #CA281C;
		font-size: 26rpx;
		background-color: #FCC865;
		border-radius: 5rpx;
		margin-right: 30rpx;
		text-decoration: line-through;
	}

	.names {
		font-size: 30rpx;
		color: #3D3D3D;
	}

	.tops {
		margin-top: 10rpx;
	}

	.titles {
		width: 686rpx;
		margin-left: 32rpx;
		display: flex;
		height: 132rpx;
		align-items: center;
	}

	.line {
		width: 10rpx;
		height: 36rpx;
		border-radius: 2px 5px 2px 2px;
		background: linear-gradient(180deg, #84BD00 0%, rgba(87, 144, 248, 0.7) 98%);
	}

	.tname {
		font-size: 34rpx;
		color: #333333;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.null {
		width: 750rpx;
		height: 160rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottom {
		width: 750rpx;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0px 17px 50px 0px rgba(0, 0, 0, 0.13);
		position: fixed;
		bottom: 0;
		// padding-bottom: env(safe-area-inset-bottom);
	}

	.go {
		width: 358rpx;
		height: 82rpx;
		background: #84BD00;
		border-radius: 50rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
	}

	.moneybox {
		display: flex;
		align-items: center;
		margin-left: 26rpx;
	}

	.economize {
		font-size: 30rpx;
		color: #999999;
		margin-left: 10rpx;
		margin-top: 8rpx;
	}

	.price {
		font-size: 46rpx;
		color: #84BD00;
		font-weight: bold;
	}

	.y {
		font-size: 26rpx;
	}

	.agreement {
		width: 686rpx;
		margin-left: 32rpx;
		font-size: 26rpx;
		margin-top: 40rpx;
		color: #999999;
	}

	.red {
		color: #84BD00;
	}

	.box {
		width: 670rpx;
		margin-left: 40rpx;
		border: 1px solid #DBDBDB;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.boxmove {
		width: 100%;
		border-bottom: 1px solid #DBDBDB;
		height: 116rpx;
		display: flex;
		align-items: center;
	}
	
	.box-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 32rpx;
		margin-right: 20rpx;
	}

	.icons {
		color: #84BD00;
		font-size: 50rpx;
		margin-left: 32rpx;
		margin-right: 20rpx;
	}

	.bname {
		font-size: 30rpx;
		color: #3D3D3D;
	}

	.border {
		border: 0;
	}

	.words {
		margin-top: 10rpx;
		color: #999999;
		font-size: 26rpx;
		margin-left: 40rpx;
	}

	.member-box {
		width: 670rpx;
		margin-left: 40rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 30rpx;

		.member-con {
			width: 208rpx;
			background: rgba(255, 255, 255, 0.1);
			box-sizing: border-box;
			border: 1px solid #DBDBDB;
			border-radius: 20rpx;
			padding: 30rpx 0;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-content: center;

			.member-title {
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				color: #333333;
			}

			.member-money {
				width: 100%;
				text-align: center;
				font-size: 45rpx;
				color: #84BD00;

				text {
					font-size: 30rpx;
				}
			}

			.member-price {
				width: 100%;
				text-align: center;
				color: #999999;
				font-size: 26rpx;
			}

			.line-con {
				text-decoration: line-through;
			}
		}

		.selectbox {
			background-color: rgba(77, 134, 239, 0.1);
			box-sizing: border-box;
			border: 3px solid #84BD00;

			.selectcolor {
				color: #84BD00;
			}

			.selectcolorop {
				color: rgba(77, 134, 239, 0.5);
			}
		}
	}

	.yiguoqi {
		position: absolute;
		top: 10px;
		right: 35px;
		width: 154rpx;
		height: 154rpx;
		z-index: 999999999999999999999;
		opacity: 0.7;
	}
</style>